{% extends 'base.html' %}
{% block T_head %}
    <link rel="stylesheet" href="{% static 'css/alertify.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/alertify.default.min.css' %}">
    <script src="https://cdn.bootcss.com/raty/2.8.0/jquery.raty.min.js"></script>
    <script src="{% static 'js/alertify.min.js' %}"></script>
    <script>
        $(function(){

        $(".star").raty({
            number : 5,//星星个数
            path : '{% static 'img/star' %}',//图片路径
            hints : ['很差','较差','还行','推荐','力荐'],
            round:{down:.26,full:.7,up:.9},
            click : function(score, evt) {
                var id = this.id;
                var tr = document.getElementById('is_login');//利用是否存在登录成功的标签id来判断是否登录
                if (tr != null) {
                    var data_dict = {
                        'user_id': {{ user.id }},
                        'movie_id': id,
                        'score': score,
                         csrfmiddlewaretoken: '{{ csrf_token }}'
                    };
                    $.ajax({
                            url: '{% url 'movie:index' %}',
                            type: 'POST',
                            dataType: 'json',
                            data: data_dict,
                            success: function (data) {
                                if (data.status === true) {
                                    alertify.success('成功评分');
                                    $('#'+id.toString()).raty('readOnly', true);
                                }
                                else {
                                    alertify.error('您已经评分过！');
                                    $('#'+id.toString()).raty('score', data.score);
                                    $('#'+id.toString()).raty('readOnly', true);
                                }

                            },
                            error:function () {
                                alert('未请求成功！');
                            }
                        }
                    );

                }
                else{
                    alertify.alert("您还没有登录，请先登录！",
                        function(){

                             $(window).attr('location', '{% url 'login' %}');
                          }).set({'title':''});
                }
            }
        });
    });
    </script>
{% endblock %}

{% block T_body %}
    <div class="container" id="movies_content">
                <ul class="figures_lists">
                {% for movie in movies.object_list %}
                <li class="list_item col-sm-6 col-md-3" >
                    <a class="figure" >
                        <img src={{ movie.poster_url }} alt={{ movie.title }}>
                    </a>
                    <strong class="figure_title">
                    <a  target="_blank" href={{ movie.url }}>{{ movie.title }}</a>
                    <div class="evaluate">
                       <div class="star" id = {{ movie.id }}></div>
                    </div>
                    </strong>
                </li>
                {% endfor %}
                </ul>

             <ul class="pagination figure_lists">
            {# 如果当前页还有上一页 #}
            {% if movies.has_previous %}
                <li>
                    {# 点击a标签，跳转到上一页链接 ?rating_{{ key }}_page  为地址后面拼接的参数 #}
                    <a href="?movies_page{{movies.previous_page_number}}">上一页</a>
                </li>
            {% else %}
                {# 如果没有上一页， 则上一页按钮不可点击 #}
                <li class="disabled">
                    <a href="#">上一页</a>
                </li>
            {% endif %}

            {% for page_number in paginator.page_range %}
                {# 获取当前页的页码 #}
                {% if page_number == movies.number %}
                    {# 如果是当前页的话，选中 #}
                    <li class="active">
                        <a href="?movies_page={{page_number}}">{{page_number}}</a>
                    </li>
                {% else %}
                    <li>
                        <a href="?movies_page={{page_number}}">{{page_number}}</a>
                    </li>
                {% endif %}
            {% endfor %}

            {% if movies.has_next %}
                <li>
                    <a href="?movies_page={{movies.next_page_number}}">下一页</a>
                </li>
            {% else %}
            <li class="disabled">
                <a href="#">下一页</a>
            </li>
            {% endif %}
        </ul>
    </div>
{% endblock %}